<template>
  <div class="search-box">
    <div class="search-box1">
      PRODUCT
    </div>
    <div class="search-box2">
      <div class="search-inner-box">
        <el-input v-model="keyWord" placeholder="Please input product name"
                  style="border: 1px solid #30A9FC;
                  border-radius: 5px 5px 5px 5px;" @input="handleInput"/>
      </div>
    </div>
    <div class="search-box4">
      <el-button type="primary" :icon="Search" style="height: 34px;" @click="handleSelect()">Search</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineEmits, defineProps } from 'vue';
import axios from "axios";
import ReportApiUrlConfig from '@/api/select.ts';

import { useRouter,useRoute } from 'vue-router';
const router=useRouter()
const route=useRoute()
const emit = defineEmits();

const props = defineProps({
  model: {
    type: String,
    default: ""
  },
  category: {
    type: String,
    default: ""
  },
  keyWord: {
    type: String,
    default: ""
  },
  text: {
    type: String,
    default: ""
  }
});

const list = ref([]);
const filteredOptions = ref([]);
const keyWord = ref(props.keyWord);  // 使用 props.keyWord 初始化 keyWord 变量

// 通过接口加载数据
const querySupplyUseNum = async () => {
  const postData = {
    categoryId: null, // 分类ID
    name: null // 名称名字
  };
  const { data } = await axios.post(ReportApiUrlConfig.productList, postData);
  if (!data) return;
  list.value = data.rows;
  filteredOptions.value = list.value;
};

// 处理选择
const handleSelect = () => {
  emit('update:keyWord', keyWord.value); // 传递到父组件
  router.push({ path: '/software', query: { keyWord: keyWord.value } });  // **新增**
};

// 处理输入事件
const handleInput = (value) => {
  keyWord.value = value;  // 确保 keyWord 绑定的是用户输入的值
};

onMounted(() => {
  querySupplyUseNum();
});

// // 根据用户输入模糊匹配
// const remoteMethod = (query) => {
//   if (query !== '') {
//     filteredOptions.value = list.value.filter(item =>
//       item.name.includes(query)
//     );
//   } else {
//     filteredOptions.value = list.value;
//   }
// };
</script>

<style scoped>
.search-box {
  display: flex;
  width: 100%;
  height: 80px;
  border-bottom: 1px solid #e0e0e0;
  margin-top: 0px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

.search-box1 {
  width: 160px;
  height: 33px;
  background: #30A9FC;
  border-radius: 5px 5px 5px 5px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  font-weight: bold;
}

.search-box2 {
  width: 330px;
  height: 34px;
  background: #30A9FC;
  border-radius: 5px 5px 5px 5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.search-inner-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.search-box4 {
  width: 62px;
  height: 34px;
  border-radius: 5px 5px 5px 5px;
}
</style>
